<template>
  <el-form ref="form" label-width="100" :model="model" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="头像" prop="headImg">
          <AvatarUploader v-model="model.headImg" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请填写姓名" v-model="model.name" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="昵称" prop="nickName">
          <el-input placeholder="请填写昵称" v-model="model.nickName" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请填写用户名" v-model="model.username" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请填写密码" v-model="model.password" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="角色" prop="roleIdList">
          <RoleSelect v-model="model.roleIdList" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="手机号码" prop="phone">
          <el-input
            placeholder="请填写手机号码"
            v-model="model.phone"
            maxlength="11"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请填写邮箱" v-model="model.email" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            rows="4"
            placeholder="请填写备注"
            v-model="model.remark"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="状态">
          <el-radio-group v-model="model.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item>
          <div style="width: 100%; text-align: right">
            <el-button type="default" @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addUser, updUser } from "@/api/user";

export default {
  data() {
    return {
      model: {
        id: 0,
        headImg: "", // 头像
        name: "", // 姓名
        nickName: "", // 昵称
        username: "", // 用户名
        password: "", // 密码
        roleIdList: [], // 角色ID列表
        status: 1, // 状态 0-关闭 1-开启
        remark: "", // 备注
        email: "", // 邮箱
        phone: "", // 手机号码
      },
    };
  },

  computed: {
    // 是否编辑模式
    isEditMode() {
      return this.model.id !== 0;
    },

    rules() {
      return {
        name: [{ required: true, message: "必填" }],
        nickName: [{ required: true, message: "必填" }],
        username: [{ required: true, message: "必填" }],
        password: [{ required: !this.isEditMode, message: "必填" }],
        roleIdList: [{ required: true, message: "必填" }],
        phone: [{ pattern: /^1\d{10}$/, message: "请输入正确的手机号码" }],
        email: [{ type: "email", message: "请输入正确的邮箱" }],
      };
    },
  },

  methods: {
    /**
     * 取消处理
     */
    handleCancel() {
      // 通知父组件，我取消了
      this.$emit("cancel");
    },

    /**
     * 确认处理
     */
    async handleConfirm() {
      // 1. 表单校验
      await this.$refs.form.validate();
      // 2. 根据 isEditModel 调用不同的接口
      if (this.isEditMode) {
        // 编辑
        await updUser(this.model);
      } else {
        // 新增
        const { id, ...model } = this.model;
        await addUser(model);
      }
      // 3. 通知父组件，我OK了。
      this.$emit("success");
    },

    setModel(data) {
      Object.assign(this.model, data);
    },
  },
};
</script>
